.video-upload {
  height: 100vh;
  overflow: hidden;
  background-color: #f7f7f7;
  &-top {
    background: #ffffff;
    padding: 0 18px 20px;
    border-radius: 0 0 12px 12px;
    .video-top-title {
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #000000;
      line-height: 14.7px;
      padding: 20px 0 14px 0;
    }
    .video-top-content {
      background: rgba(250, 44, 25, 0.04);
      border-radius: 8px;

      &-text {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #222222;
        text-align: justify;
        line-height: 18px;
        padding: 12px 12px 10px 12px;
      }
    }
  }
  &-content {
    height: 77%;
    margin-top: 12px;
    padding: 0 16px 0 17px;
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    .video-content-top {
      display: flex;
      height: 60px;
      padding: 20px 0 20px 6px;
      border-bottom: 1px solid #efefef;
      .video-content-top-ls {
        border: 1px solid red;
        height: 19px;
      }
      .video-content-top-select {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        overflow: hidden;
      }
      .video-selected {
        box-shadow: 0 2px 4px 0 #fad1cb;
      }
      .video-unselect {
        box-shadow: 0 2px 4px 0 #e1e1e1;
      }

      .video-content-text {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #2B2B2B;
        letter-spacing: 0;
        text-align: justify;
        line-height: 20px;
        padding-left: 8px;
        vertical-align: top;
      }
    }

    .video-upload-main {
      margin: 18.5px auto;
      border-radius: 8px;

      display: flex;
      .video-upload-main-size {
        display: flex;
      }
      .video-upload-left {
        position: relative;
        width: 107px;
        height: 107px;
        background: #f6f7f8;
        border-radius: 8px;
        margin: 0 auto;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .video-upload-input {
          position: absolute;
          top: 0;
          left: 0;
          width: 107px;
          height: 107px;
          overflow: hidden;
          border: 1px solid red;
          opacity: 0;
        }
        .video-icon {
          width: 37px;
          height: 26px;
          margin: 33px auto 7px;
        }
        .video-icon-text {
          font-family: PingFangSC-Regular;
          font-size: 11px;
          color: #979797;
          letter-spacing: 0;
          text-align: justify;
          padding-bottom: 25px;
        }
      }
      .video-upload-right {
        flex: 1;
        margin-left: 20px;

        .video-upload-right-title {
          font-family: PingFangSC-Medium;
          font-size: 14px;
          color: #000000;
          line-height: 14px;
          margin: 13px auto 11px;
        }
        .video-upload-right-des {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #979797;
          letter-spacing: 0;
          text-align: justify;
          line-height: 16px;
          margin-bottom: 12px;
        }
        .video-text-red {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #fa2c19;
          letter-spacing: 0;
          text-align: justify;
          line-height: 12px;
        }
      }
    }
  }

  .video-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #ffffff;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.04);
    width: 100%;
    height: 60px;
    .video-footer-btn {
      background-image: linear-gradient(
        135deg,
        #fa2c19 0%,
        #fa3f19 45%,
        #fa5919 83%,
        #fa6419 100%
      );
      border-radius: 24px;
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      line-height: 48px;
      padding-top: 1px;
      height: 48px;
      width: 339px;
      margin: 0 auto;
      font-weight: bold;
      margin-top: 6px;
    }
  }
}
.grey{
  opacity: .7;
}
.video-succ {
  position: relative;
  width: 107px;
  height: 107px;
  overflow: hidden;
  background: #f6f7f8;
  border-radius: 8px;
  overflow: hidden;
 
  .video-media-poster {
    width: 107px;
    height: 107px;
    border-radius: 8px;

    .video-ref-content{
      border-radius: 8px;
    }
    video,img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      object-fit: fill;
    }
  }
  .video-tips {
    position: absolute;
    top: -11px;
    right: -12px;
    width: 28px;
    height: 28px;
    z-index: 999;
  }
  .video-succ-bot{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 100%;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 12px;
    text-align: center;
    padding-top: 4px;
    border-radius: 0 0 8px 8px ;
    background: rgba(0,0,0,.4);
    font-family: PingFangSC-Regular;
    z-index:999;
  }
}

.opacity-show{
  opacity: .5;
}